<!DOCTYPE html>
<html>
	<head>
		<!--
        	作者：刘开新
        	时间：2018-09-28
        	描述：
        -->
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		姓名<input type="text" id="name_lkx" />
		账号<input type="text" id="id_lkx"/>
		角色<input type="text" id="role_lkx" />
		手机号<input type="text" id="phone_lkx"/>
		QQ号<input type="text" id="qq_lkx" /><br />
		性别<input type="text" id="sex_lkx" />
		年龄<input type="text" id="age_lkx" />
		家庭地址<input type="text" id="dizhi_lkx" />
		邮箱<input type="text" id="email_lkx"/>
		爱好<input type="text" id="aihao_lkx" />
		<button id="add" onclick="add()">新增</button>
		<table id="mytable" border="2">
			<thead>
				<tr >
					<th>姓名</th><th>账号</th><th>角色</td><th>手机号</th><th>QQ号</th>
					<th>Q性别</td><th>年龄</th><th>家庭地址</th><th>邮箱</th><th>爱好</td><th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>lkx</td><td>lkx</td><td>lkx</td><td>lkx</td><td>lkx</td>
					<td>lkx</td><td>lkx</td><td>lkx</td><td>lkx</td><td>lkx</td>
					<td>
						<button id="=update" onclick="update(this)">修改</button>
						<button id="=udelete" onclick="deletel(this)">删除</button>
					</td>
				</tr>
			</tbody>
		</table>
		
		
		
		<script type="text/javascript">
			
			var list=[{
				"name_lkx":"刘开新",
				"id_lkx":"liukaixin",
				"user_lkx":"超级管理员",
				"phone_lkx":13134567890,
				"qq_lkx":146656546,
				"sex_lkx":"nan",
				"age_lkx":21,
				"dizhi_lkx":"湖南长沙",
				"email_lkx":"149112@qq.com",
				"aihao_lkx":"吉他，篮球，健身，编程"
			},
			{
				"name_lkx":"刘开新",
				"id_lkx":"liukaixin",
				"user_lkx":"用户",
				"phone_lkx":13134567890,
				"qq_lkx":146656546,
				"sex_lkx":"nan",
				"age_lkx":21,
				"dizhi_lkx":"湖南长沙",
				"email_lkx":"149112@qq.com",
				"aihao_lkx":"篮球，健身"
			},
			{
				"name_lkx":"刘开新",
				"id_lkx":"liukaixin",
				"user_lkx":"老板",
				"phone_lkx":13134567890,
				"qq_lkx":146656546,
				"sex_lkx":"nan",
				"age_lkx":21,
				"dizhi_lkx":"湖南长沙",
				"email_lkx":"149112@qq.com",
				"aihao_lkx":"篮球，健身"
			},
			{
				"name_lkx":"刘开新",
				"id_lkx":"liukaixin",
				"user_lkx":"员工",
				"phone_lkx":13134567890,
				"qq_lkx":146656546,
				"sex_lkx":"nan",
				"age_lkx":21,
				"dizhi_lkx":"湖南长沙天心区",
				"email_lkx":"149112@qq.com",
				"aihao_lkx":"编程"
			},
			{
				"name_lkx":"刘开新",
				"id_lkx":"liukaixin",
				"user_lkx":"超级管理员",
				"phone_lkx":13134567890,
				"qq_lkx":146656546,
				"sex_lkx":"nan",
				"age_lkx":21,
				"dizhi_lkx":"湖南长沙",
				"email_lkx":"149112@qq.com",
				"aihao_lkx":"吉他"
			}
			]
			
			
			
			console.log(list.length);
			
			
			var tbody =document.getElementById("mytable").getElementsByTagName("tbody").item(0);
			for(var i=0;i<list.length;i++){
				var ttr=document.createElement("tr");
				var td1=document.createElement("td");
					td1.innerText=list[i].name_lkx;
				var td2=document.createElement("td");
					td2.innerText=list[i].id_lkx;
				var td3=document.createElement("td");
					td3.innerText=list[i].user_lkx;
				var td4=document.createElement("td");
					td4.innerText=list[i].phone_lkx;
				var td5=document.createElement("td");
					td5.innerText=list[i].qq_lkx;
				var td6=document.createElement("td");
					td6.innerText=list[i].sex_lkx;
				var td7=document.createElement("td");
					td7.innerText=list[i].age_lkx;
				var td8=document.createElement("td");
					td8.innerText=list[i].dizhi_lkx;
				var td9=document.createElement("td");
					td9.innerText=list[i].email_lkx;
				var td10=document.createElement("td");
					td10.innerText=list[i].aihao_lkx;
				var but=document.createElement("td");
				but.innerHTML=but.innerHTML="<button id='update' onclick='update(this)'>修改</button><button onclick='deletel(this)' id='udelete'>删除</button>";
				ttr.appendChild(td1);
				ttr.appendChild(td2);
				ttr.appendChild(td3);
				ttr.appendChild(td4);
				ttr.appendChild(td5);
				ttr.appendChild(td6);
				ttr.appendChild(td7);
				ttr.appendChild(td8);
				ttr.appendChild(td9);
				ttr.appendChild(td10);
				ttr.appendChild(but);
				tbody.appendChild(ttr);
			}
			
			
			
			function add(){				
				var name=document.getElementById("name_lkx").value;
				var phone=document.getElementById("phone_lkx").value;
				var qq=document.getElementById("qq_lkx").value;
				var iid=document.getElementById("id_lkx").value;
				var role=document.getElementById("role_lkx").value;
				var sex=document.getElementById("sex_lkx").value;
				var age=document.getElementById("age_lkx").value;
				var dizhi=document.getElementById("dizhi_lkx").value;
				var emaill=document.getElementById("email_lkx").value;
				var aihao=document.getElementById("aihao_lkx").value;
				var lenght=document.getElementById("mytable").getElementsByTagName("thead")
				.item(0).getElementsByTagName("tr").item(0).getElementsByTagName("th").length;
				var tbody=document.getElementById("mytable").getElementsByTagName("tbody").item(0);
				var ttr=document.createElement("tr");
				var ttd=document.createElement("td");
					ttd.innerHTML=name;
					ttr.appendChild(ttd);	
				var ttd=document.createElement("td");
					ttd.innerHTML=iid;
					ttr.appendChild(ttd);
				var ttd=document.createElement("td");
					ttd.innerHTML=role;
					ttr.appendChild(ttd);	
				var ttd=document.createElement("td");
					ttd.innerHTML=phone;
					ttr.appendChild(ttd);	
				var ttd=document.createElement("td");
					ttd.innerHTML=qq;
					ttr.appendChild(ttd);
				var ttd=document.createElement("td");
					ttd.innerHTML=sex;
					ttr.appendChild(ttd);
				var ttd=document.createElement("td");
					ttd.innerHTML=age;
					ttr.appendChild(ttd);
				var ttd=document.createElement("td");
					ttd.innerHTML=dizhi;
					ttr.appendChild(ttd);
				var ttd=document.createElement("td");
					ttd.innerHTML=emaill;
					ttr.appendChild(ttd);
				var ttd=document.createElement("td");
					ttd.innerHTML=aihao;
					ttr.appendChild(ttd);
				var but=document.createElement("td");
				but.innerHTML="<button id='update' onclick='update(this)'>修改</button><button onclick='deletel(this)' id='udelete'>删除</button>";
				ttr.appendChild(but);
				tbody.appendChild(ttr);
			}
			
			function deletel(obj){
				var a=obj.parentNode.parentNode;
				console.log(a);
				a.parentNode.removeChild(a);
				
			}
			
			function update(obj){
				var name=document.getElementById("name_lkx").value;
				var iid=document.getElementById("id_lkx").value;
				var role=document.getElementById("role_lkx").value;
				var phone=document.getElementById("phone_lkx").value;
				var qq=document.getElementById("qq_lkx").value;	
				var sex=document.getElementById("sex_lkx").value;
				var age=document.getElementById("age_lkx").value;
				var dizhi=document.getElementById("dizhi_lkx").value;
				var emaill=document.getElementById("email_lkx").value;
				var aihao=document.getElementById("aihao_lkx").value;
				var tr1=obj.parentNode.parentNode;
				var tds=tr1.childNodes;
				var td1=tds[0];
				td1.innerText=name;
				
				var td2=tds[3];
				td2.innerText=phone;
				
				var td3=tds[4];
				td3.innerText=qq;
				
				var td4=tds[1];
				td4.innerText=iid;
				
				var td5=tds[2];
				td5.innerText=role;
				
				var td6=tds[5];
				td6.innerText=sex;
				
				var td7=tds[6];
				td7.innerText=age;

				var td8=tds[7];
				td8.innerText=dizhi;
				
				var td9=tds[8];
				td9.innerText=emaill;
				
				var td10=tds[9];
				td10.innerText=aihao;
			}
			
			
			
			
		</script>
	</body>
</html>
